<template>
  <div class="success" v-loading="loading">
    <div class="success-nav">
      <div class="success-nav-aspect">
        <span class="success-nav-aspect-content">恭喜您！公司认证已通过</span>
        <div class="success-nav-aspect-btn" @click="show=true">查看公司认证信息</div>
      </div>
      <div class="success-nav-bill">
        <router-link to="/" class="success-nav-bill-btn">我要办单</router-link>
        <!-- <div class="success-nav-bill-btn">我要办单</div> -->
      </div>
    </div>
    <div class="success-overview" v-show="show">
      <el-form class="form" label-position="right" label-width="1.6rem">
        <template v-for="(item,index) in formLabel">
          <div :key="index">
            <div class="form-title">{{item.fieldset}}</div>
            <div class="form-wrapper">
              <el-row>
                <el-col :span="item.groupSpan||12" v-for="(formItem) in item.group" :key="formItem.key">
                  <el-form-item :label-width="formItem.labelWidth" :class="{'top-label':formItem.type===1}">
                    <template #label v-if="formItem.label">
                      <span class="form-field" >{{formItem.label}}:</span>
                    </template>
                    <UploadImg v-if="formItem.type===1" :ref="formItem.key" :fileType='1' :tip="'上传文档'" :disabled="true" @handleGetUrl="form[formItem.key]=$event" :src="form[formItem.key]"></UploadImg>
                    <span class="form-value" v-else>{{formItem.value?formItem.value:form[formItem.key]}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </template>
      </el-form>
    </div>
  </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
export default {
  name:'ApproveSuccess',
  props:['form','address','pictures'],
  components:{
    UploadImg
  },
  data(){
    return {
      show:false,
      loading:false,
      city:[],
      district:[],
      province:[],
      formLabel:[
        {
          fieldset:'认证业务类型',
          group:[
            {label:'',key:'serviceType',value:this.serviceType(),labelWidth:'0'}
          ],
        },
        {
          fieldset:'企业详细信息',
          group:[
            {label:'企业注册名称',key:'allname'},
            {label:'企业税号',key:'qtaxnum'},
            {label:'企业法人',key:'qlegalperson'},
            {label:'企业地址',key:'addressStr',value:this.addressStr()},
            {label:'详细街道',key:'alladdrfull'},
          ]
        },
        {
          fieldset:'企业银行信息',
          group:[
            {label:'开户银行',key:'allbankname'},
            {label:'银行账号',key:'allbankaccount'},
          ],
          groupSpan:24
        },
        {
          fieldset:'联系人信息',
          group:[
            {label:'联系人姓名',key:'allpeople'},
            {label:'联系人手机号',key:'allphone1'},
          ],
          groupSpan:24
        },
        {
          fieldset:'企业资料信息',
          group:[
            {label:'营业执照影印件',key:'qbusinesslicence',type:1},
            {label:'开票资料',key:'allinvoicei',type:1},
            {label:'授权书',key:'qauthbook',type:1},
          ],
          groupSpan:8
        },
      ]
    }
  },
  methods:{
    addressStr(){
      return this.address.province.find(item=>item.value===Number(this.form.alladdr1))?.label+
      this.address.city.find(item=>item.value===Number(this.form.alladdr2))?.label+
      this.address.district.find(item=>item.value===Number(this.form.alladdr3))?.label || ''
    },
    serviceType(){
      const str = []
      str.push([this.form.isbusiness,'商城卖家'])
      str.push([this.form.isbuyer,'商城买家'])
      str.push([this.form.isopcer,'开证公司'])
      str.push([this.form.isagent,'国外代理'])
      str.push([this.form.ishuodai,'货代公司'])
      str.push([this.form.isstorage,'仓储公司'])
      str.push([this.form.iscustom,'业务客户'])

      return str.filter(item=>item[0]==='1').map(item=>item[1]).join('、')
    }

  },
  computed:{

  },
}
</script>

<style lang="scss" scoped>

.success{
  width: 100%;
}

::v-deep .el-form-item{
  margin-bottom: 0;
}

.success-nav{
  display: flex;
  justify-content: space-between;

  &-aspect{
    width: 6.95rem;
    height: 2.41rem;
    background: #FEFFE9 url(~@/assets/images_accredited/qyrz_pass_pic.png) no-repeat;
    background-position: -0.6rem center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding-left: 1.85rem;

    &-content{
      font-size: .3rem;
      color: #4F4F4F;
    }

    &-btn{
      margin-top: .24rem;
      font-size: .2rem;
      color: #fff;
      width: 2.4rem;
      height: .58rem;
      line-height: .58rem;
      text-align: center;
      background-color: #2D9D0B;
      border-radius: .06rem;
      cursor: pointer;
    }
  }

  &-bill{
    position:relative;
    width: 4.85rem;
    height: 2.4rem;
    background: #F8F8F8 url(~@/assets/images_accredited/qyrz_bz_pic.png) no-repeat;
    background-position: .44rem center;
    &-btn{
      position:absolute;
      left: 2.06rem;
      top: 1.16rem;
      font-size: .2rem;
      line-height: .58rem;
      width: 2.4rem;
      height: .58rem;
      text-align: center;
      background-color: #234EB1;
      border-radius: .1rem;
      color: #fff;
      cursor: pointer;
    }

  }
}

.form-title{
  margin: .2rem 0;
  position:relative;
  display: inline-block;
  font-size: .24rem;
  font-weight: 700;
  line-height: 1.25;
  color: #565656;
  padding-left: .27rem;
  &::before{
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content:'';
    width: .06rem;
    height: .24rem;
    background-color: #2D9D0B;
  }
}

.form{
  margin-top: .47rem;
}

.form .form-wrapper{
  display:flow-root;
  padding-left: .27rem;
}
.form .form-wrapper .form-field{
  margin-bottom: .2rem;
  font-size: .2rem;
  color: #999999;
  font-weight: 400;
}
.form .form-wrapper .form-value{
  font-size: .18rem;
  color: #000;
}
.form .form-wrapper .form-field + .form-value{
  margin-left: .19rem;
}

::v-deep .el-row{
  height: .4rem;
}

::v-deep .top-label{
  display: flex;
  flex-direction: column;
  .el-form-item__content{
    margin-left: 0!important;
  }
  .el-form-item__label{
    display: flex;
    justify-content: flex-start;
  }
}




</style>
